<div class="container" ng-app="diaryApp" ng-controller="diaryCtrl">
    <h2>写日记</h2>
    <hr>
    <p>录一段语音日记吧<a href="">开始录制</a></p>
    <form class="form-horizontal" ng-submit="postForm()" >
        <div class="form-group">
            <div class="col-sm-3">
                <select class="form-control">
                    <option value="" >天气日记</option>
                    <option value="" >心情日记</option>
                    <option value="" >默认日记</option>
                </select>
            </div>
            
            <a href="#/notebook">管理我的日记本</a>
        </div>
        
       
        <div class="form-group">
            <label for="inputText" class="col-sm-1 control-label" style="text-align: left">心情:</label>
            <div class="col-sm-4">
                <input type="text" ng-model="formData.mood" name="mood" class="form-control" id="inputText" placeholder="喜.怒.哀.乐..." required >
            </div>
        </div>
        <div class="form-group">
            <label for="inputText" class="col-sm-1 control-label" style="text-align: left">天气:</label>
            <div class="col-sm-4">
                <input type="text" ng-model="formData.weather" name="weather" class="form-control" id="inputText" placeholder="引.晴.雨.风..." required>
            </div>
        </div>
        <div class="form-group">
            <label for="inputText" class="col-sm-1 control-label" style="text-align: left">地点:</label>
            <div class="col-sm-4">
                <input type="text" ng-model="formData.location" name="location" class="form-control" id="inputText" placeholder="写日记的地点" required>
            </div>
        </div>

       <div class="form-group">
            <div id="container" style="padding:15px;">
                <textarea ng-model="formData.diary" class="form-control riji_text" rows="3" placeholder="日记内容" name="diary" id="msg" ng-maxlength="22000" required></textarea>
	        </div>
       </div>

        

            <div>
                <label><input type="checkbox">&nbsp;只有自己可见</label>
                &#x3000;
                <label><input type="checkbox">&nbsp;不允许被回复</label>
                <span class="riji_num">还可以输入<b>22000</b> / 22000个字符</span>
            </div>
        
        <div class="form-group">
            <div class=" col-sm-10">
                <button type="submit" class="btn btn-primary" ng-disabled="form.diary.$error">写日记</button>
            </div>
        </div>
        
    </form>
</div>

<script type="text/javascript">

    // 检测字数
    //日记输入内容计算字个数
    $('.riji_text').on('keyup', riji_num);
    //日记输入内容得到交单计算字个数
    $('.riji_text').on('focus', function () {
        setTimeout(function () {
            riji_num();
        }, 50);
    });

    //22000字检测
    function riji_num() {
        var total = 22000;
        var len = $('.riji_text').val().length;
        var temp = 0;
        if (len > 0) {
            for (var i = 0; i < len; i++) {
                if ($('.riji_text').val().charCodeAt(i) > 255) {
                    temp += 2;
                } else {
                    temp += 1;
                }
            }
            var result = Math.round((total - temp)/2 - 0.5);
            if (result >= 0) {
                $('.riji_num').html('您还可以输入<strong>' + result + '</strong>  / 22000个字符');
                return true;
            } else {
                $('.riji_num').html('已经超过了<strong style="color:red">' + (-result) + '</strong>个字符');
                return false;
            }
        }else if(len == 0){
            $('.riji_num').html('您还可以输入<strong>22000</strong>  / 22000 个字符');
        }
    }
</script>